<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script>
 //同时发送多个请求
     let   p1=new Promise((resolve,reject)=>{
         $.ajax({
             url:'./data/1.json',
             success:function(res) {
                 resolve(res)
             },
             error:function(err) {
                 reject(err)
             }
         })
     })

    //  p1
    //  .then(res=>
    //  {console.log(res)})
    //  .catch(err=>{
    //      console.log(err)
    //  })




   let   p2=new Promise((resolve,reject)=>{
         $.ajax({
             url:'./data/2.json',
             success:function(res) {
                 resolve(res)
             },
             error:function(err) {
                 reject(err)
             }
         })
     })

    //  p2
    //  .then(res=>
    //  {console.log(res)})
    //  .catch(err=>{
    //      console.log(err)
    //  })


     let p3=new Promise((resolve,reject)=>{
         $.ajax({
             url:'./data/3.json',
             success:function(res) {
                 resolve(res)
                
             },
             error:function(err) {
                 reject(err)
             }
         })
     })

     p3
     .then(res=>
     {
         
        
        console.log(res)
    
        getHtml(res)
    
    })
     .catch(err=>{
         console.log(err)
     })



// function  p4 () {
//     return $.ajax({
//         url:'./data/4.json'
//     })
// }





 let p4=$.ajax({url:'./data/4.json'})  // $.ajax的返回值本身就是一个promise 


  //all  表示所有   提前条件   p1 p2 p3 一定要是一个promise 
//   如果一个失败则拿不到数据
  Promise.all([p1,p2,p3,p4]).then(res=>{
      console.table(res)
  }).catch(err=>{
      console.log(err.responseText)
  })









  //拼接数据的函数    一个函数只做一件事件  如果需要多个事件进行处理  组装函数
    // function  getHtml( id,obj,domBox,callback) {
    //    let html= template(id,obj)

    //    $(domBox).html(html)
    // //    callback&&callback()
    // }



    // function  getManyThings(dom) {
    //     // getHtml(callback)
    //     // getAimate(dom)
    //      // getStyle(dom) 
    // }

    // getManyThings()

    </script>
</body>
</html>